{include file="public/head"/}
<script language="javascript" src="/static/Admin/js/tinymce/tinymce.min.js"></script>
<script>
	$(document).ready(function () {
		//设置modal垂直居中,移动
		// modalSetting(".modal"); 
		
		// $("[data-toggle='tooltip']").tooltip();

		// 解决BOOSTRAP TAB不能跳转外部页面问题
		$("#proTab li").click(function (e) {
			e.preventDefault()
			$(this).tab('show')      
			window.location.href = $(this).children('a').attr('href')
		})
	});
</script>
<div class="container-fluid" id="main">

    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="alert alert-dismissable alert-info">
                <button type="button" class="close">×</button>
                <p></p>
            </div>
        </div>
    </div>


	<div class="ntDesktop">
		<div class="ntDesktop-head">{$title}</div>
        <input type="hidden" id="pro_id" value="{$pro_id}">
        <div class="row" style="padding-top:12px">
            <div class="col-md-8 column">
                <ul class="nav nav-tabs" id="proTab">
                    <li >
                        <a href="{:url('product/productEdit',array('request'=>'edit','id'=>$pro_id))}" data-toggle="tab">{:lang('summary')}</a>
                    </li>
                    <li >
                        <a href="{:url('product/proAddNewJump',array('request'=>'intro','pro_id'=>$pro_id))}" >{:lang("information")}</a>
                    </li>
                    <li class="active">
                        <a href="{:url('product/proAddNewJump',array('request'=>'item','pro_id'=>$pro_id))}" data-toggle="tab">{:lang("accessory")}</a>
                    </li>
                    <li >
                        <a href="{:url('product/proAddNewJump',array('request'=>'img','pro_id'=>$pro_id))}" data-toggle="tab">{:lang("image")}</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-4 column text-right">
                <div>
                    <a href="{:url('product/productlist')}" class="btn btn-default">
                    	<span class="glyphicon glyphicon-chevron-left"></span>{:lang('back_to_list')}
                    </a>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 text-right form-inline">
                <div class="form-group">
                        {:lang("the_role_of_product")}<span class="required"></span>
                    <select class="form-control" id="prochar" @click="changeprochar" v-cloak>
                        <option v-for="(itemchar,indexchar) in prochar" :value="itemchar.id"> {{itemchar.feature_zh}}</option>
                    </select>
                </div>
            	<a href="{:url('product/proAddNewJump_itemNewAdd',array('pro_id'=>$pro_id))}" type="button" class="btn btn-primary" data-toggle="modal" data-target="#proitem_newModal"><span class="fa fa-star"></span>{:lang('generate_new_products_as_accessories')}</a>
                <a href="{:url('product/proAddNewJump_itemAdd',array('pro_id'=>$pro_id,'request'=>'add'))}" type="button" class="btn btn-primary" data-toggle="modal" data-target="#pro2item_editModal"><span class="fa fa-search-plus"></span>添加现有产品做为配件</a>
            </div>
        </div>
    
        <div class="row">
            <div class="col-md-12 column">
                
                                
                <table class="table table-striped ntTable">

                    <thead>
                        <tr>
                            <td>No.</td>
                            <td>&nbsp;</td>
                            <td class="sorting">{:lang('serial_number')}/{:lang("brand")}/{:lang("product_name")}/{:lang('model')}</td>
                            <td class="sorting">{:lang("quantity")}</td>
                            <td class="sorting">{:lang('status')}</td>
							<td class="sorting">{:lang("box_measure")}</td>
                            <td>{:lang('edit')}</td>
                            <td>{:lang('operate')}</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in listdata" v-cloak>
                            <td align="center">{{item.id}}</td>
                            <td><img :src="item.proimg_url" border="0" width="48px" height="48px"></td>
                            <td> <small>{{item.title}}</small> <br />{{item.content}} </td>
                            <td align="center">{{item.qty}}</td>
                            <td align="center">{{item.status}}</td>
                            <td>
                            	{{item.ctn_size}}
                            </td>
                            <td>{{item.create_name}}<br /><small>{{item.create_at}}</small></td>
                            <td class="text-right">
                                <div>
                                    <!-- <a :href="'/admin/product/proAddNewJump_itemEdit?pro_id='+pro_id+'&prochar_id='+item.prochar_id+'&pro_id2item='+item.pro_id2item+'&prochar_id2item='+item.prochar_id2item+'&qty='+item.qty" class='btn btn-sm btn-primary' data-toggle="modal" data-target="#pro2item_editModal"> -->
                                    <a :href="'/admin/product/proAddNewJump_itemEdit?item_id='+item.id+'&request=edit'" class='btn btn-sm btn-primary' data-toggle="modal" data-target="#pro2item_editModal">
                                    	<span class="glyphicon glyphicon-pencil"></span> {:lang('edit')}
                                   	</a>
                                    <a href="#" class='btn btn-sm btn-default' @click="itemChangeStatus(item.id)">
                                    	<span class="glyphicon glyphicon-remove"></span> {:lang('delete')}
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <nav aria-label="Page navigation" class="pagebox">
                    <ul class="pagination"></ul>
                </nav>
            </div>
        </div>

	</div>
</div>



<!--产品介绍添加弹窗部分 开始-->
<div class="modal fade" id="pro2item_editModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<!--产品介绍添加弹窗部分 开始-->
<div class="modal fade" id="proitem_newModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">
           
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script type="text/javascript">
    $("#pro2item_editModal").on("hidden.bs.modal", function() {
        $(this).removeData("bs.modal");
        $(".modal-content").children().remove();
    });
    $("#proitem_newModal").on("hidden.bs.modal", function() {
        $(this).removeData("bs.modal");
        $(".modal-content").children().remove();
    });
</script>
<script src="/static/Admin/js/proaddnew_item.js"></script>
{include file="public/foot"/}